<template>
  <view class="container">
    <view class="section">
      <view class="section-title">步骤演示</view>
      <x-steppers 
        :steps="stepsWithDesc" 
        :active="active"
        active-color="#2979ff"
      >
        <!-- 第一步内容 -->
        <template #step-0>
          <view>
            <text>第一步内容</text>
            <view class="step-actions">
              <button size="mini" type="primary" @click="handleNext">下一步</button>
            </view>
          </view>
        </template>
        
        <!-- 第二步内容 -->
        <template #step-1>
          <view>
            <text>第二步内容</text>
            <view class="step-actions">
              <button size="mini" type="default" @click="active--">上一步</button>
              <button size="mini" type="primary" @click="handleNext">下一步</button>
            </view>
          </view>
        </template>
        
        <!-- 第三步内容 -->
        <template #step-2>
          <view>
            <text>第三步内容</text>
            <view class="step-actions">
              <button size="mini" type="default" @click="active--">上一步</button>
              <button size="mini" type="primary" @click="handleDone">完成</button>
            </view>
          </view>
        </template>
      </x-steppers>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 步骤数据
const stepsWithDesc = [
  { 
    title: '第一步',
    desc: '第一步说明'
  },
  { 
    title: '第二步',
    desc: '第二步说明'
  },
  { 
    title: '第三步',
    desc: '第三步说明'
  }
]

// 当前步骤
const active = ref(0)

// 步骤操作
const handleNext = () => {
  if (active.value < 2) {
    active.value++
  }
}

// 完成操作
const handleDone = () => {
  uni.showToast({
    title: '完成',
    success: () => {
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
  })
}
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  background: #f8f8f8;
}

.section {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  transition: all 0.3s ease;

  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
  }
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.step-actions {
  display: flex;
  justify-content: center;
  gap: 20rpx;
  padding: 20rpx 0;
}
</style>